<template>
	<view class="container">
		<map style="width: 100%; height: 100vh;" @tap='handleMapClick' @callouttap='handleClickMarker'
			@markertap='handleClickMarker' :latitude="latitude" :longitude="longitude" :markers="covers">
			<cover-view class="map-filter">
				<cover-view class="filter">
					<cover-view @click="isMap=false" :class="{'active':!isMap}">全部</cover-view>
					<cover-view @click="isMap=true" :class="{'active':isMap}">我的</cover-view>
				</cover-view>
			</cover-view>

			<cover-view class="voice">
				<!-- 			<cover-view  class="voice-mode" :class="[recording?'recording':'']"
					@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
					@touchcancel="voiceCancel">{{voiceTis}}</cover-view > -->
				<cover-view class="voice-mode" :class="[recording?'recording':'']"
					@click="voiceBegin">{{voiceTis}}</cover-view>
			</cover-view>
			<cover-view class="record" :class="recording?'':'hidden'">
				<cover-view class="ing" :class="willStop?'hidden':''">
				<!-- 	<u-icon name="mic" color="#fff" size="28"></u-icon> -->
				</cover-view>
				<cover-view class="cancel" :class="willStop?'':'hidden'">
					<cover-view class="icon chehui"></cover-view>
				</cover-view>
				<!-- <cover-view class="tis" :class="willStop?'change':''">{{recordTis}}</cover-view> -->
			</cover-view>

		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				RECORDER: uni.getRecorderManager(),
				isVoice: false,
				voiceTis: '按住 说话',
				recording: false,
				willStop: false,
				recordTis: "手指上滑 取消发送",
				recordTimer: null,
				recordLength: 0,

				isMap: false,
				latitude: 39.909,
				longitude: 116.39742,
				selectMarkerId: '',
				covers: [{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					width: 20,
					height: 20,
					iconPath: '../../static/logo.png',
					callout: {
						content: "1", // 车牌信息
						display: "ALWAYS",
						fontWeight: "bold",
						color: "#fff", //文本颜色
						fontSize: "12px",
						bgColor: "rgba(114,96,72)", //背景色
						padding: 5, //文本边缘留白
						textAlign: "center",
					},
				}, {
					id: 2,
					latitude: 39.909,
					longitude: 116.38742,
					width: 20,
					height: 20,
					iconPath: '../../static/logo.png',
					callout: {
						content: "2", // 车牌信息
						display: "ALWAYS",
						fontWeight: "bold",
						color: "#fff", //文本颜色
						fontSize: "12px",
						bgColor: "rgba(114,96,72)", //背景色
						padding: 5, //文本边缘留白
						textAlign: "center",
					},
				}],
			};
		},
		onLoad(option) {
			//录音开始事件
			this.RECORDER.onStart((e) => {
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e) => {
				this.recordEnd(e);
			})
		},
		methods: {
			handleNavToPay() {
				uni.navigateTo({
					url: '/pages/device/devicePay/devicePay'
				})
			},
			handleNavToDetail() {
				uni.navigateTo({
					url: '/pages/device/deviceDetail/deviceDetail'
				})
			},
			handleMapClick() {
				this.selectMarkerId = ''
			},
			handleClickMarker(e) {
				this.selectMarkerId = e.detail.markerId
			},
			// 录音开始
			voiceBegin(e) {
				if (this.recording) {
					this.voiceEnd()
				} else {
					this.recordBegin()
					this.RECORDER.start({
						format: "mp3"
					}); //录音开始,
				}

			},
			//录音开始UI效果
			recordBegin(e) {
				this.recording = true;
				this.voiceTis = '点击 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
				}, 1000)
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.RECORDER.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '点击手指 取消发送'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e) {
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop(); //录音结束
			},
			// 发送消息
			sendMsg(content, type) {
				console.log(content)
			},
			//录音结束(回调文件)
			recordEnd(e) {
				clearInterval(this.recordTimer);
				if (!this.willStop) {
					console.log("e: " + JSON.stringify(e));
					let msg = {
						length: 0,
						url: e.tempFilePath
					}
					let min = parseInt(this.recordLength / 60);
					let sec = this.recordLength % 60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					msg.length = min + ':' + sec;
					this.sendMsg(msg, 'voice');
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
		}
	}
</script>

<style lang="scss">
	.hidden {
		display: none !important;
	}

	.container {
		background-color: $uni-color-bg;
		min-height: 100vh;
		padding-bottom: 120upx;
		box-sizing: border-box;

		.filter-box {
			width: 100%;
			padding-top: 22upx;
			background-color: $uni-color-bg;
		}

		.filter {
			background-color: #fff;
			border-radius: 30upx;
			width: 280upx;
			display: flex;
			margin: 0 auto;
			margin-bottom: 0;
			align-items: center;

			text {
				border-radius: 30upx;
				width: 140upx;
				padding: 12upx 0;
				text-align: center;
				box-sizing: border-box;
			}

			.active {
				background-color: $uni-color-bg-z;
				color: #fff;
			}
		}

		.roads {
			padding: 22upx 0;
			box-sizing: border-box;
			// background-color: #fff;

			.road {
				display: flex;
				align-items: center;
				padding: 22upx 30upx;
				box-sizing: border-box;
				border-bottom: 1upx solid $uni-color-bg-s;

				image {
					width: 160upx;
				}

				.c-content {
					display: flex;
					flex-direction: column;
					width: calc(100% - 120upx);
					margin-left: 20upx;

					.c-title {
						font-size: 34upx;
						font-weight: 600;
					}

					.c-desc {
						color: #666;
						font-size: 28upx;
						margin: 8upx 0;
						margin-bottom: 16upx;
					}

					.tags {
						display: flex;

						.tag {
							background-color: $uni-color-bg-s;
							padding: 8upx 16upx;
							font-size: 26upx;
							margin-right: 8upx;
							color: $uni-color-primary;
						}
					}
				}
			}
		}

		.scan {
			position: fixed;
			bottom: 30upx;
			width: 80vw;
			left: 10vw;
		}
	}

	.covers-content {
		position: absolute;
		width: calc(100% - 60upx);
		left: 30upx;
		background-color: #fff;
		border-radius: 8upx;
		bottom: 60upx;
		z-index: 999;
		padding-top: 22upx;
		box-sizing: border-box;

		.road {
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 22upx 30upx;
			margin-bottom: 22upx;

			image {
				width: 100upx;
				height: 100upx;
			}

			.c-content {
				display: flex;
				flex-direction: column;
				width: calc(100% - 120upx);
				margin-left: 20upx;

				.c-title {
					font-size: 34upx;
					font-weight: 600;
				}

				.c-desc {
					color: #666;
					font-size: 28upx;
					margin: 8upx 0;
					display: flex;
					justify-content: space-between;
				}

				.tags {
					display: flex;

					>view {
						margin-right: 8upx;
					}
				}
			}
		}
	}

	.map-filter {
		position: absolute;
		top: 22upx;
		left: 50%;
		transform: translateX(-50%);

		.filter {
			background-color: #fff;
			border-radius: 30upx;
			width: 280upx;
			display: flex;
			margin: 0 auto;
			height: 70upx;
			margin-bottom: 0;
			align-items: center;

			cover-view {
				border-radius: 30upx;
				width: 140upx;
				text-align: center;
				line-height: 66upx;
				height: 100%;
				box-sizing: border-box;
			}

			.active {
				background-color: $uni-color-bg-z;
				color: #fff;
			}
		}

	}

	.map-scan {
		position: absolute;
		bottom: 30upx;
		width: 80vw;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;

		.scan {
			position: relative;
			width: 80vw;
			bottom: 0;
			left: 0;
		}
	}

	.record {
		width: 40vw;
		height: 40vw;
		position: fixed;
		top: 55%;
		left: 30%;
		background-color: rgba(0, 0, 0, .6);
		// background-color:  #fff;
		border-radius: 20upx;

		.ing {
			width: 100%;
			height: 30vw;
			display: flex;
			justify-content: center;
			align-items: center;

			// 模拟录音音效动画
			@keyframes volatility {
				0% {
					background-position: 0% 130%;
				}

				20% {
					background-position: 0% 150%;
				}

				30% {
					background-position: 0% 155%;
				}

				40% {
					background-position: 0% 150%;
				}

				50% {
					background-position: 0% 145%;
				}

				70% {
					background-position: 0% 150%;
				}

				80% {
					background-position: 0% 155%;
				}

				90% {
					background-position: 0% 140%;
				}

				100% {
					background-position: 0% 135%;
				}
			}

			.icon {
				background-image: linear-gradient(to bottom, #f09b37, #fff 50%);
				background-size: 100% 200%;
				animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 150upx;
				color: #f09b37;
			}
		}

		.cancel {
			width: 100%;
			height: 30vw;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				color: #fff;
				font-size: 150upx;
			}
		}

		.tis {
			width: 100%;
			height: 10vw;
			display: flex;
			justify-content: center;
			font-size: 28upx;
			color: #fff;

			&.change {
				color: #f09b37;
			}
		}
	}

	.voice {
		position: fixed;
		bottom: 120upx;
		left: 50%;
		transform: translateX(-50%);
	}

	.voice-mode {
		width: 200upx;
		height: 200upx;
		border-radius: 50%;
		font-size: 28upx;
		line-height: 200upx;
		text-align: center;
		background-color: $uni-color-bg-z;
		color: #fff;

		&.recording {
			background-color: #e5e5e5;
		}
	}
</style>